<template>
    <div class="notFound404" v-bind:style="boxSizeStyle">
        <div class="wscn-http404">
            <div class="pic-404">
                <img class="pic-404__parent" v-bind:src="img404" alt="404">
                <img class="pic-404__child left" v-bind:src="img404cloud" alt="404">
                <img class="pic-404__child mid" v-bind:src="img404cloud" alt="404">
                <img class="pic-404__child right" v-bind:src="img404cloud" alt="404">
            </div>
            <div class="bullshit">
                <div class="bullshit__oops">OOPS!</div>
                <div class="bullshit__headline">{{ message }}</div>
                <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
                <a href="/" class="bullshit__return-home">返回首页</a>
            </div>
        </div>
    </div>
</template>

<script>
import img404 from '@/assets/404.png'
import img404cloud from '@/assets/404_cloud.png'

export default {
    data () {
        return {
            img404,
            img404cloud,
            boxSizeStyle: {
                width: 0,
                height: 0
            }
        }
    },
    methods: {
        setBoxSize: function () {
            this.boxSizeStyle.width = window.innerWidth + 'px'
            this.boxSizeStyle.height = window.innerHeight + 'px'
        },
        setResizeAction: function () {
            let that = this
            window.onresize = function () {
                that.setBoxSize()
            }
        }
    },
    computed: {
        message () {
            return '好像出现了什么错误......'
        }
    },
    created: function () {
        this.setBoxSize()
        this.setResizeAction()
    }
}
</script>
<style lang="stylus" scoped>
@keyframes cloudLeft
    0%
        top 17px
        left 220px
        opacity 0
    20%
        top 33px
        left 188px
        opacity 1
    80%
        top 81px
        left 92px
        opacity 1
    100%
        top 97px
        left 60px
        opacity 0
@keyframes cloudMid
    0%
        top 10px
        left 420px
        opacity 0
    20%
        top 40px
        left 360px
        opacity 1
    70%
        top 130px
        left 180px
        opacity 1
    100%
        top 160px
        left 120px
        opacity 0
@keyframes cloudRight
    0%
        top 100px
        left 500px
        opacity 0
    20%
        top 120px
        left 460px
        opacity 1
    80%
        top 180px
        left 340px
        opacity 1
    100%
        top 200px
        left 300px
        opacity 0
@keyframes slideUp
    0%
        transform translateY(60px)
        opacity 0
    100%
        transform translateY(0)
        opacity 1
.notFound404
    .wscn-http404
        position absolute
        left 50%
        top 50%
        transform translate(-50%, -50%)
        width 1200px
        overflow hidden
        .pic-404
            position relative
            float left
            width 600px
            overflow hidden
            &.left
                width 80px
                top 17px
                left 220px
                opacity 0
                animation-name cloudLeft
                animation-duration 2s
                animation-timing-function linear
                animation-fill-mode forwards
                animation-delay 1s
            &.mid
                width 46px
                top 10px
                left 420px
                opacity 0
                animation-name cloudMid
                animation-duration 2s
                animation-timing-function linear
                animation-fill-mode forwards
                animation-delay 1.2s
            &.right
                width 62px
                top 100px
                left 500px
                opacity 0
                animation-name cloudRight
                animation-duration 2s
                animation-timing-function linear
                animation-fill-mode forwards
                animation-delay 1s
        .bullshit
            position relative
            float left
            width 300px
            margin-top 50px
            overflow hidden
    .wscn-http404
        .pic-404__parent
            width 100%
        .pic-404__child
            position absolute
            &.left
                width 80px
                top 17px
                left 220px
                opacity 0
                animation-name cloudLeft
                animation-duration 2s
                animation-timing-function linear
                animation-fill-mode forwards
                animation-delay 1s
            &.mid
                width 46px
                top 10px
                left 420px
                opacity 0
                animation-name cloudMid
                animation-duration 2s
                animation-timing-function linear
                animation-fill-mode forwards
                animation-delay 1.2s
            &.right
                width 62px
                top 100px
                left 500px
                opacity 0
                animation-name cloudRight
                animation-duration 2s
                animation-timing-function linear
                animation-fill-mode forwards
                animation-delay 1s
        .bullshit__oops
            font-size 32px
            font-weight bold
            line-height 40px
            color #1482f0
            opacity 0
            margin-bottom 20px
            animation-name slideUp
            animation-duration 0.5s
            animation-fill-mode forwards
        .bullshit__headline
            font-size 20px
            line-height 24px
            color #1482f0
            opacity 0
            margin-bottom 10px
            animation-name slideUp
            animation-duration 0.5s
            animation-delay 0.1s
            animation-fill-mode forwards
        .bullshit__info
            font-size 13px
            line-height 21px
            color grey
            opacity 0
            margin-bottom 30px
            animation-name slideUp
            animation-duration 0.5s
            animation-delay 0.2s
            animation-fill-mode forwards
        .bullshit__return-home
            display block
            float left
            width 110px
            height 36px
            background #1482f0
            border-radius 100px
            text-align center
            color #ffffff
            opacity 0
            font-size 14px
            line-height 36px
            cursor pointer
            animation-name slideUp
            animation-duration 0.5s
            animation-delay 0.3s
            animation-fill-mode forwards
</style>
